<template>
    <div class="skillwrapper">
        <div class="loading-container" v-if="hasData">
            <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
        </div>
        <!-- content -->
        <div class="s-list-area" ref="partsw">
            <div>
                <!-- 列表 -->
                <div class="pro-item pro-item-nobd" v-for="(item, index) in datalist">
                    <div class="list-item-con border-none">
                        <div class="desc">
                            <img v-if="item.photo" @load="loadImage" v-lazy="item.photo" class="skillimg">
                            <p class="text" v-if="!item.photo">{{item.content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- content end  -->
    </div>
</template>

<script type="text/ecmascript-6">
    import Loading from 'components/loading/loading';
    import BScroll from 'better-scroll';
    import apiUrl from '../../../config/api';
    import axios from 'axios';

    export default {
        data() {
            return {
                loadingDesc: '正在载入...',
                loadingShowimg: true,
                pageCount: 0,
                hasData: true,
                datalist: []
            }
        },
        created() {
            this._getdata();
            this.$nextTick(() => {
                this._initScroll();
            })
        },
        methods: {
            _initScroll() {
                this.PartListScroll = new BScroll(this.$refs.partsw, {
                    click: true
                });
            },
            _getdata() {
                axios({
                    method: 'get',
                    url: apiUrl.skill + 1 + '&pageSize=50'
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if (response.data.data.list.length > 0) {
                            this.hasData = false;
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.datalist.push(response.data.data.list[i]);
                                if (this.datalist[i].contentCategory === '1') {
                                    this.$set(this.datalist[i], 'photo', this.datalist[i].content);
                                }
                            }
                        }
                    } else {
                        this.loadingShowimg = false;
                        this.loadingDesc = response.msg;
                    }
                })
            },
            loadImage() {
                this.PartListScroll.refresh();
            }
        },
        components: {
            Loading
        }
    }
</script>
